<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '商品管理'}, {name: '商品规格'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:600px;">
            <div>
                <table class="width100 vd-table">
                    <tbody>
                    <tr>
                        <td>商品名称</td>
                        <td>
                            <el-input :value="goods_name" disabled class="width-400"/>
                        </td>
                    </tr>

                    <tr>
                        <td>商品规格</td>
                        <td style="padding:10px;">
                            <div>
                                <el-input placeholder="输入规格名称，比如：颜色" v-model="specification_name"
                                          class="width-400 mr-10"></el-input>
                                <el-button v-preventDbClick type="success" @click="addSpecificationName">新增规格
                                </el-button>
                            </div>
                            <div class="mt-10" v-for="(item,index) in list" :key="index">
                                <div class="o-hidden">
                                    <el-input placeholder="输入规格名，如：红色" v-model="item.specification_name"
                                              class="width-400 pull-left"></el-input>
                                    <el-button v-preventDbClick class="pull-left ml-10"
                                               @click="editSpecificationName(index)" type="primary">编辑规格
                                    </el-button>
                                    <el-button v-preventDbClick class="ml-10 pull-left" type="danger"
                                               @click="delSpecificationName(item.id)">删除规格
                                    </el-button>
                                </div>
                                <div class="o-hidden mt-10 ml-40">
                                    <div class="l pull-left">
                                        <el-input v-model="item.addobj.specification" placeholder="输入规格值，如：红色"
                                                  class="width-150"></el-input>
                                        <el-input v-model="item.addobj.price" placeholder="普通销售价格"
                                                  type="number" @input="changePrice(index)"
                                                  class="width-150 ml-10"></el-input>
                                        <el-input v-model="item.addobj.promotion_price" placeholder="促销活动价格"
                                                  type="number"
                                                  class="width-150 ml-10"></el-input>
                                        <el-button v-preventDbClick class="ml-10" type="success"
                                                   @click="addSpecification(index)">新增
                                        </el-button>
                                    </div>
                                </div>
                                <div class="ml-40 mt-10 l" v-for="(item2,index2) in item.child" :key="index2">
                                    <el-input placeholder="输入规格值，如：红色" v-model="item2.specification"
                                              class="width-150 pull-left"></el-input>
                                    <el-input placeholder="普通销售价格" type="number" v-model="item2.price"
                                              class="width-150 ml-10 pull-left"></el-input>
                                    <el-input placeholder="促销活动价格" type="number" v-model="item2.promotion_price"
                                              class="width-150 ml-10 pull-left"></el-input>
                                    <el-button v-preventDbClick class="ml-10" type="primary"
                                               @click="editSpecification(index,index2)">编辑
                                    </el-button>
                                    <el-button v-preventDbClick class="ml-10" type="danger"
                                               @click="delSpecification(item2.id)">删除
                                    </el-button>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <el-button v-preventDbClick @click="gotoPage('/goods/list')" type="info">商品列表页
                            </el-button>
                            <el-button v-preventDbClick @click="gotoPage('/goods/detail?id='+id)" type="info">
                                此商品详情页
                            </el-button>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            editId: 0,
            goods_name: '',
            specification_name: '',
            list: []
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.id = this.$route.query.id ? this.$route.query.id : 0;
        request({
            url: '/manage/goods/one',
            data: {id: this.id}
        }).then((res) => {
            this.goods_name = res.data.name;
            this.getData();
        })
    },

    methods: {
        changePrice(index) {
            console.log(index);
            this.list[index]['addobj'].promotion_price = this.list[index]['addobj'].price;
        },
        editSpecification(index, index2) {
            request({
                url: '/manage/GoodsSpecification/editSpecification',
                data: this.list[index]['child'][index2]
            }).then((res) => {
                tool.message(res.msg, 'success', () => {
                    // this.specification_name = '';
                    this.getData();
                })
            })
        },
        addSpecification(index) {
            request({
                url: '/manage/GoodsSpecification/addSpecification',
                data: this.list[index]['addobj']
            }).then((res) => {
                tool.message(res.msg, 'success', () => {
                    // this.specification_name = '';
                    this.getData();
                })
            })
        },
        delSpecification(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/GoodsSpecification/delSpecification',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },
        editSpecificationName(index) {
            // console.log(this.list[index]);return;
            request({
                url: '/manage/GoodsSpecification/editSpecificationName',
                data: this.list[index]
            }).then((res) => {
                tool.message(res.msg, 'success', () => {
                    // this.specification_name = '';
                    this.getData();
                })
            })
        },
        addSpecificationName() {
            let addobj = {
                specification_name: this.specification_name,
                goods_id: this.id
            }
            request({
                url: '/manage/GoodsSpecification/addSpecificationName',
                data: addobj
            }).then((res) => {
                tool.message(res.msg, 'success', () => {
                    this.specification_name = '';
                    this.getData();
                })
            })
        },
        delSpecificationName(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/GoodsSpecification/delSpecificationName',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },
        getData() {
            request({
                url: '/manage/GoodsSpecification/getSpecificationByGoodsId',
                data: {id: this.id}
            }).then((res) => {
                let list = res.data.names;
                let values = res.data.values;
                for (let i = 0; i < list.length; i++) {
                    list[i]['addobj'] = {
                        goods_id: this.id,
                        goods_specification_name_id: list[i]['id'],
                        specification: '',
                        price: '',
                        promotion_price: ''
                    };
                    list[i]['child'] = [];
                    for (let k = 0; k < values.length; k++) {
                        if (values[k]['goods_specification_name_id'] == list[i]['id']) {
                            list[i]['child'].push(values[k]);
                        }
                    }
                }
                console.log(list)
                this.list = list;
            })
        },
        reset() {
        }
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
